<template>
  <div class="detailtabel">
    <div class="table_main">
		<el-row>
			<el-col :span="24">
				<el-row class="item_left">
					<el-col :span="24">
						<h3>帖子信息:</h3>
              <el-row class="order_item">
                <el-col :sm="12"  :lg="8">
                  <div class="label">ID:</div>
                  <div class="content">{{tableData.id}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">标题:</div>
                  <div class="content">{{tableData.title}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">状态:</div>
                  <div class="content"><el-tag
                    :type="tableData.status === 1 ? 'success' : 'info'"
                    disable-transitions>{{tableData.status == 1? '正常':'删帖' }}</el-tag></div>
                </el-col>
                <el-col :sm="24"  :lg="24">
                  <div class="label">内容:</div>
                  <div class="content">{{tableData.content}}</div>
                </el-col>
                <el-col :sm="24"  :lg="24" style="height: 220px;">
                  <div class="label">图片:</div>
                  <div class="content">
                    <img
                      style="height: 200px"
                      v-for="url in srcList"
                      :key="url"
                      :src="url"
                      @click="preview(url)">
                  </div>
                </el-col>

                <el-col :sm="12"  :lg="8">
                  <div class="label">话题:</div>
                  <div class="content">{{tableData.topic}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">是否置顶:</div>
                  <div class="content">{{tableData.top ? tableData.top == 1? '是': '否' : '未设置'}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">是否加热:</div>
                  <div class="content">{{tableData.hot ? tableData.hot == 1? '是': '否' : '未设置'}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">点赞数:</div>
                  <div class="content">{{tableData.giving}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">评论数:</div>
                  <div class="content">{{tableData.comments}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">创建时间:</div>
                  <div class="content">{{tableData.createTime}}</div>
                </el-col>
                <el-col :sm="12"  :lg="12" v-if="tableData.result">
                  <div class="label">删贴原因:</div>
                  <div class="content">{{tableData.result}}</div>
                </el-col>
              </el-row>

					</el-col>
				</el-row>
				<el-row class="item_left">
					<el-col :span="24">
						<h3>发帖人信息:</h3>
              <el-row class="order_item">
                <el-col :sm="12"  :lg="8" style="height: 100px;">
                  <div class="label">头像:</div>
                  <div class="content"><img style="width: 65px; height: 65px" :src="tableData.headImg"></div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">id:</div>
                  <div class="content">{{tableData.userId}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">陪玩昵称:</div>
                  <div class="content">{{tableData.nickName}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">性别:</div>
                  <div class="content">{{tableData.sex ? tableData.sex == 1? '男': '女' : '未设置'}}</div>
                </el-col>
                <el-col :sm="12"  :lg="8">
                  <div class="label">年龄:</div>
                  <div class="content">{{tableData.age}}</div>
                </el-col>
              </el-row>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="24" style="float: right;">
				<el-row class="item_right">
					<el-col :span="24">
						<h3>评论信息:</h3>
            <el-table
              v-loading="tableDataLoading"
              :data="commentsData.content"
              row-key="id">
              <el-table-column
                prop="id"
                label="编号"
                width="80">
              </el-table-column>
              <el-table-column
                prop="bId"
                label="帖子ID"
                width="80">
              </el-table-column>
              <el-table-column
                prop="userId"
                label="评论人ID"
                width="80">
              </el-table-column>
              <el-table-column
                prop="nickName"
                label="用户昵称"
                width="80">
              </el-table-column>
              <el-table-column prop="headImg" label="头像" width="120">
                <template slot-scope="scope">
                  <div v-if="scope.row.headImg == '' || scope.row.headImg == null">
                    <img src="~@/assets/img/avatar.png" alt="" width="60" height="60">
                  </div>
                  <div v-else>
                    <img :src="scope.row.headImg" alt="" width="60" height="60">
                  </div>
                </template>
              </el-table-column>

              <el-table-column
                prop="giving"
                label="点赞数">
              </el-table-column>
              <el-table-column
                prop="content"
                label="评论">
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间">
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                fixed="right"
                width="150">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    :disabled="!isAuth('userSquare:deleteComment')"
                    @click="deletes(scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="text-align: center;margin-top: 10px;">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="size"
                :current-page="page"
                layout="total,sizes, prev, pager, next"
                :total="tableData.totalElements">
              </el-pagination>
            </div>
          </el-col>
				</el-row>
			</el-col>
		</el-row>
	</div>
    <!-- 图片放大 -->
    <el-dialog :visible.sync="dialogFormVisible"  width="50%" style="text-align: center;">
      <img :src="lookimg" alt="" style="max-width:100%;max-height: 100%;">
    </el-dialog>
	</div>
</template>

<script>
	export default {
	    data() {
	      return {
          lookimg:'',
          size:5,
          page:1,
			  tableData:{},
        commentsData:{},
          dialogFormVisible: false,
          tableDataLoading: false,
			}
		},
    computed: {
      srcList(){
        if(this.tableData.photo){
          return this.tableData.photo.split(',')
        }
        return []
      }
    },
		methods: {
      preview(url){
        this.lookimg = url
        this.dialogFormVisible = true
      },
      // 返回上一级
      prev () {
        this.$router.back()
      },
      handleSizeChange (val) {
        this.size = val
        this.dataSelect()
      },
      handleCurrentChange (val) {
        this.page = val
        this.dataSelect()
      },
      // 删除
      deletes(row){
        this.$confirm(`确定删除此条评论?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl2('/bbs/deleteComment'),
            method: 'get',
            params: this.$http.adornParams({
              'id':row.id
            })
          }).then(({data}) => {
            this.$message({
              message: '删除成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.dataSelect()
              }
            })
          })
        }).catch(() => {})
      },
      // 获取详情数据
      dataSelect () {
        let page = this.page - 1
        let id = this.$route.query.id
        this.tableDataLoading = true
        this.$http({
          url: this.$http.adornUrl2('/bbs/findOne'),
          method: 'get',
          params: this.$http.adornParams({
            'id': id
          })
        }).then(({data}) => {
          let returnData = data.data;
          this.tableData = returnData
        })

        this.$http({
          url: this.$http.adornUrl2('/bbs/pageOfComments'),
          method: 'get',
          params: this.$http.adornParams({
            'page':page,
            'size':this.size,
            'id': id
          })
        }).then(({data}) => {
          this.tableDataLoading = false
          let commentsData = data.data;
          this.commentsData = commentsData
        })
      },
    },
		activated() {
			this.dataSelect()
		}
	  }
</script>

<style scoped="scoped" lang="scss">

    .order_item{
      border: 1px solid #e8e8e8;
      .el-col{
        display: flex;
        height: 50px;
        .label{
          width: 100px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #fafafa;
          /*padding: 16px 24px;*/
          border-right: 1px solid #e8e8e8;
          border-bottom: 1px solid #e8e8e8;
        }
        .content{
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          /*padding: 16px 24px;*/
          border-right: 1px solid #e8e8e8;
          border-bottom: 1px solid #e8e8e8;
          overflow: hidden;
        }
      }

    }


	/*.order_item{border: 1px solid #e8e8e8;}*/
	/*.border-top{border-top: 1px solid #ddd;}*/
	/*.item_left{border: 1px solid #ddd; border-radius: 8px;padding:10px 15px;margin-bottom: 20px;}*/
	/*.item_right{border: 1px solid #ddd;border-radius: 8px;padding:10px 15px; margin-bottom: 20px;}*/
</style>
